import React from 'react'
import Topbar from '../../components/Topbar/Topbar';
import { Carousel, WingBlank } from 'antd-mobile';
import './ActivityDetail.css'
import logo from '../../img/logo.png'

class ActivityDetail extends React.Component {

	constructor(props) {
    super(props);
    this.state = {
      id:props.location.state.id,
      name:props.location.state.name,
      attr:'https://www.prebeauty.work',
      data:{},
      content:[],
      imgs:['1','2','3'],
      attr:'https://www.prebeauty.work'
    };
	}

  componentDidMount(){
    setTimeout(() => {
      this.setState({
        imgs: this.state.imgs,
      });
    }, 6000);

    this.getActivityData()
  }

  getActivityData(){
		fetch(`https://www.prebeauty.work/activity/${this.state.id}`)
			.then((res) => res.json())
			.then(data => {
        var content=[]
        var imgs=[]
        content = this.changeRow(data[0].content)
        imgs = this.splitImgs(data[0].image)
        data.map(data => {
          data.time = this.timeTrans(data.time)
        })
				this.setState({
					data:data[0],
          content:content,
          imgs:imgs
				})
        console.log(this.state.data)
			})
			.catch(err => console.log(err));
	}

  //比较大小
  compare(property){
    return function(a,b){
      var value1 = a[property];
      var value2 = b[property];
      return value2 - value1;
    }
  }

  //将时间戳转换成正常时间格式
  timeTrans(date){
    var date = new Date(date*1);
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    return Y+M+D;
  }

  //按照标点符号换行
  changeRow(str){
    var res=[]
    var reg = /[,，.。?？!！:：;；]/g;
    str=str.replace(reg,"\n");
    res=str.split("\n")
    // console.log(res)
    return res;
  }

  //按照标点符号换行
  splitImgs(str){
    var res=[]
    res=str.split(";")
    // console.log(res)
    return res;
  }

	render() {
    return (
      <div style={{backgroundColor:'#f5f5f5'}}>
        <Topbar name={this.state.name} color='#95D2AA'/>
        <div id='detail-slogan'>
          {this.state.data.slogan}
        </div>
        <WingBlank>
          <Carousel
            autoplay={true}
            infinite
            dots={false}
          >
            {this.state.imgs.map(img => (
              <a
                key={img}
                href={this.state.attr+img}
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={this.state.attr+img}
                  alt=""
                  id='detail-img'
                  onLoad={() => {
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>
        </WingBlank>
        <div id='detail-context'>
          {this.state.content.map(text=>(
            <p id='detail-text'>
              {text}
            </p>
          ))}
        </div>
        <div id='detail-details'>
          <p id='detail-details-item'>地点：{this.state.data.place}</p>
          <p id='detail-details-item'>时间：{this.state.data.time}</p>
          <p id='detail-details-item'>举办单位：{this.state.data.holder}</p>
        </div>
        <div id='detail-bottom'>
          <div id='detail-bottom-text'>         
            <p id='detail-bottom-text-item'>扫描二维码</p>
            <p id='detail-bottom-text-item'>了解更多详细信息</p>
            <img src={logo} alt='' id='detail-bottom-text-logo'/>
          </div>
          <div className="iconfont icon-barcode-qr" id='detail-bottom-code'></div>
          <div className="iconfont icon-barcode-qr" id='detail-bottom-code'></div>
        </div>
      </div>
    )
  }
}

export default ActivityDetail